<template>
	<view>
		<van-nav-bar :title="'运输中 预计最晚2日后送达'" left-text="返回" left-arrow @click-left="onClickLeft" />
		<view class="title">剩余9天17小时自带确认收货</view>
		<view class="addr">
			<view class="icon">
				<van-icon size="20" color="#ee0a24" name="location-o" />
			</view>
			<view class="addr-info">
				<view class="addr-item">
					<text>{{address.name}}</text>
					<text>{{address.tel}}</text>
					<text>{{address.province}}</text>
					<text>{{address.city}}</text>
				</view>
				<view class="addressDetail">
					{{address.addressDetail}}
				</view>
			</view>
		</view>
		<van-card :num="goodsList.num" :price="price" :desc="goodsList.goods_styles" :title="goodsList.goods_name"
			class="goods-card" :thumb="goodsList.goods_images" />
		<van-steps :active="active">
			<van-step>买家下单</van-step>
			<van-step>商家接单</van-step>
			<van-step>商家发货</van-step>
			<van-step>买家提货</van-step>
			<van-step>交易完成</van-step>
		</van-steps>
		<div class="info">
			<view class="info-item">
				订单编号：{{order_id}}
			</view>
			<view class="info-item">
				支付方式：支付宝
			</view>
			<view class="info-item">
				商品快照：核对交易细节时，可作为判断依据
			</view>
			<view class="info-item">
				下单时间：{{time}}
			</view>
			<view class="info-item">
				物流公司：邮政快递包裹
			</view>
		</div>
		<van-action-bar>
			<van-button class="btn" plain hairline type="small">确认收货</van-button>
			<van-button class="btn" plain hairline type="small">查看物流</van-button>
			<van-button class="btn" plain hairline type="small">再次购买</van-button>
		</van-action-bar>
	</view>
</template>

<script>
	import api from "../../../api/api.js";
	export default {
		data() {
			return {
				address: "",
				goodsList: [],
				price: "",
				time: "",
				active: "",
				order_id: ""
			}
		},
		methods: {
			onClickLeft() {
				history.back();
			},
			// 获取订单
			getOrder(option) {
				api.getOrder({
					order_id: option.order_id
				}).then(res => {
					this.price = res.data.data.order_info[0].price;
					this.goodsList = res.data.data.order_info[0].goods_info;
					this.address = res.data.data.address;
					this.time = res.data.data.time;
				})
			}
		},
		onLoad(option) {
			console.log(option);
			this.active = option.active;
			this.order_id = option.order_id;
			this.getOrder(option);
		}
	}
</script>

<style>
	.title {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 12px;
		color: #505050;
	}

	.addr {
		width: 100%;
		height: 50px;
		border-top: 1px solid #EBEDF0;
		background-color: #fff;
		display: flex;
	}

	.addr .icon {
		width: 50px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addr .addr-info {
		width: calc(100% - 50px);
		height: 50px;
	}

	.addr-item,
	.addressDetail {
		width: 100%;
		height: 25px;
		font-size: 13px;
		line-height: 25px;
	}

	.addr-item text {
		margin-right: 10rpx;
	}

	.goods-card {
		margin: 10px;
		background-color: white;
	}

	.info {
		background-color: white;
		margin-top: 5px;
	}

	.info-item {
		margin-left: 20rpx;
		font-size: 12px;
		color: #505050;
		padding: 5px;
	}

	.btn {
		margin-left: 5px;
		margin-right: 10px;
	}
</style>